<template>
    <div class="login">
        <svg-icon icon-class="add" />
        <el-icon :size="20" color="#409EFC">
            <Edit />
        </el-icon>
        <el-icon><Aim /></el-icon>
        <p>{{ loginName }}</p>
        <el-button type="primary" @click="login"> go to home</el-button>
        <el-button type="info" @click="abort"> 取消该请求</el-button>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { nextTick } from 'vue';
import useRedirect from './useRedirect';
import useElLoading from '@/hooks/useElLoading';
import { useLoginInfo } from '@/store/useLoginInfo';
import { cancelRequest } from '@/service';
const router = useRouter();
const loginName = '登录页面';

// login 的store
const loginStore = useLoginInfo();
// redirect的路由hooks
const state = useRedirect();
//登录
const LoginData = {
    usename: 'admin',
    password: 123456
};
const login = async () => {
    // 全局loading服务hooks
    const loading = useElLoading();
    try {
        await loginStore.login(LoginData);
        //必须在dom加载完后关闭
        nextTick(() => {
            loading?.close();
            router.push({
                path: state.redirect || '/',
                query: state.otherQuery
            });
        });
    } catch {
        nextTick(() => {
            setTimeout(() => {
                loading?.close();
            }, 500);
        });
    }
};
const abort = () => {
    //测试取消登录操作接口 （全局loading需要关掉）
    cancelRequest(`POST/login${JSON.stringify(LoginData)}`);
};
</script>

<style lang="scss" scoped>
.login {
    @include wh100();
    background-color: #ccc;
}
</style>
